import { IconFont } from 'ym-design'

export type weatherRes = {
  adcode: string
  city: string
  humidity: string
  info: string
  province: string
  reportTime: string
  temperature: number
  weather: string
  windDirection: string
  windPower: string
}
export function Weather({ weather }: { weather?: weatherRes }) {
  function getWeatherIcon(weather: any) {
    // 定义天气和图标类名的映射关系
    const weatherIcons: any = {
      晴: 'icon-qing',
      多云: 'icon-duoyun',
      晴间多云: 'icon-duoyun',
      少云: 'icon-duoyun',
      阴: 'icon-yin',
      有风: 'icon-feng',
      平静: 'icon-feng',
      微风: 'icon-feng',
      和风: 'icon-feng',
      清风: 'icon-feng',
      '强风/劲风': 'icon-feng',
      疾风: 'icon-feng',
      大风: 'icon-feng',
      烈风: 'icon-feng',
      风暴: 'icon-feng',
      狂爆风: 'icon-feng',
      飓风: 'icon-feng',
      热带风暴: 'icon-feng',
      霾: 'icon-wumai',
      中度霾: 'icon-wumai',
      重度霾: 'icon-wumai',
      严重霾: 'icon-wumai',
      阵雨: 'icon-leizhenyu',
      雷阵雨: 'icon-leizhenyu',
      雷阵雨并伴有冰雹: 'icon-bingbao',
      小雨: 'icon-xiaoyu',
      中雨: 'icon-zhongyu',
      大雨: 'icon-dayu',
      暴雨: 'icon-baoyu',
      大暴雨: 'icon-baoyu',
      特大暴雨: 'icon-baoyu',
      强阵雨: 'icon-baoyu',
      强雷阵雨: 'icon-baoyu',
      极端降雨: 'icon-baoyu',
      '毛毛雨/细雨': 'icon-xiaoyu',
      雨: 'icon-xiaoyu',
      '小雨-中雨': 'icon-xiaoyu',
      '中雨-大雨': 'icon-zhongyu',
      '大雨-暴雨': 'icon-dayu',
      '暴雨-大暴雨': 'icon-baoyu',
      '大暴雨-特大暴雨': 'icon-baoyu',
      雨雪天气: 'icon-yujiaxue',
      雨夹雪: 'icon-yujiaxue',
      阵雨夹雪: 'icon-yujiaxue',
      冻雨: 'icon-yujiaxue',
      雪: 'icon-zhongxue',
      阵雪: 'icon-zhongxue',
      小雪: 'icon-xiaoxue',
      中雪: 'icon-zhongxue',
      大雪: 'icon-daxue',
      暴雪: 'icon-baoxue',
      '小雪-中雪': 'icon-zhongxue',
      '中雪-大雪': 'icon-daxue',
      '大雪-暴雪': 'icon-baoxue',
      浮尘: 'icon-shachen',
      扬沙: 'icon-shachen',
      沙尘暴: 'icon-shachen',
      强沙尘暴: 'icon-shachen',
      龙卷风: 'icon-longjuanfeng',
      浓雾: 'icon-wu',
      特强浓雾: 'icon-wu',
      强浓雾: 'icon-wu',
      雾: 'icon-wu',
      轻雾: 'icon-wu',
      大雾: 'icon-wu',
      冷: 'icon-leng',
      热: 'icon-re',
      未知: 'icon-weizhi'
    }

    // 默认的图标类名，可以根据需要设置
    const defaultIcon = 'icon-default'

    // 遍历映射关系，查找匹配的天气字段
    for (const key in weatherIcons) {
      // 构造匹配正则表达式，不区分大小写
      const regex = new RegExp(key, 'i')
      if (regex.test(weather)) {
        return weatherIcons[key] // 返回对应的图标类名
      }
    }

    // 如果没有找到匹配的天气字段，返回默认的图标类名
    return defaultIcon
  }

  return (
    <div>
      <div>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              marginRight: 8
            }}
          >
            <IconFont
              style={{
                fontSize: 32,
                marginTop: '-3px',
                color: 'rgba(255,255,255,0.6)'
              }}
              type={getWeatherIcon(weather?.weather)}
              // color="#fa541c"
            ></IconFont>
          </div>
          <div style={{ marginRight: '32px' }}>
            <div
              style={{
                color: 'rgba(255,255,255,0.6)',
                fontSize: 14,
                lineHeight: '16px',
                fontFamily: 'DIN-Bold',
                fontWeight: 'bold'
              }}
            >
              {weather?.temperature}℃
            </div>
            <div
              style={{
                fontSize: 14,
                lineHeight: '20px',
                color: 'rgba(255,255,255,0.6)',
                fontFamily: 'PuHuiTi-Regular'
              }}
            >
              {weather?.weather}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
